<template>
    <div class="mui-popover mui-popover-action slg-search">
        <header class="search-header mui-bar mui-bar-nav">
            <a class="mui-icon mui-icon-left-nav mui-pull-left" @tap="closePanel"></a>
            <div class="mui-title">
                <input type="text" class="search-input" placeholder="请输入商品名称">
            </div>
            <button class="mui-btn mui-btn-link mui-pull-right" @tap="searchProduct()">搜索</button>
        </header>
        <div class="search-content">
            <div class="search-user">
                <div class="item-header">最近搜索</div>
                <div class="item-content">
                    <span v-for="{id, name} in userhots" class="mui-badge" @tap="searchProduct(id, name)">
                        {{name}}
                    </span>
                </div>
            </div>
            <div class="search-hot">
                <div class="item-header">热门搜索</div>
                <div class="item-content">
                    <span v-for="{id, name} in hots" class="mui-badge" @tap="searchProduct(id, name)">
                        {{name}}
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import { apiDomain } from 'assets/js/Lib'

export default {
    data() {
        return {
        }
    },
    computed: {
        userhots: function() {
            return JSON.parse(localStorage.getItem('$userhots') || '[]')
        }
    },
    components: {

    },
    props: {
        hots: {
            type: Array,
            default: []
        }
    },
    //实例初始化最之前，无法获取到data里的数据
    beforeCreate() {


    },
    //在挂载开始之前被调用
    beforeMount() {

    },
    //已成功挂载，相当ready()
    mounted() {
        document.querySelector('.search-input').focus()
    },
    //相关操作事件
    methods: {
        closePanel: function() {
            mui('.slg-search').popover('hide')
        },
        searchProduct: function(id, name) {
          console.log('searchProduct', name);
            let url = '/views/search.html'

            if (id) {
                url += '?menu_id=' + id
            } else if (!name){
                name = document.querySelector('.mui-popover .search-input').value
              if (!name || name.length == 0) return;
              url += '?search_query=' + name
            } else if (name){
                url += '?search_query=' + name
            }

            if(name) {
                let userhots = JSON.parse(localStorage.getItem('$userhots') || '[]')
                if (userhots.length > 3) userhots.shift()
                userhots.push({
                    'id': id,
                    'name': name
                })
                localStorage.setItem('$userhots',JSON.stringify(userhots))
            } 
            let pageConfig = {
                "id": url,
                "url": url,
                show: {
                    autoShow: true
                },
                waiting: {
                    title: '加载中...'
                }
            }

            mui.openWindow(pageConfig)
        }
    }
}
</script>

<style lang="less">
.mui-popover.mui-popover-action.slg-search {
    width: 100%;
    height: 100%;
    border-radius: 0;
    position: fixed;
    top: 0;
    bottom: 0;
    background-color: #fff;
    transform: translate3d(0,-100%,0);
    &.mui-active {
        transform: translate3d(0,0,0);
    }
    .search-header {
        height: 1.375rem;
        padding-right: 0.3125rem;
        padding-left: 0.3125rem;
        background-color: #fff;
        &.mui-bar-nav.mui-bar .mui-icon {
            padding-right: 0.3125rem;
            padding-left: 0.3125rem;
        }
        &.mui-bar {
            .mui-btn-link {
                color: #333333;
                margin-left: .3125rem;
                font-size: .5rem;
                line-height: 1.375rem;
            }
            .mui-icon {
                font-size: .75rem;
                position: relative;
                z-index: 20;
                padding-top: 0.3125rem;
                padding-bottom: 0.3125rem;
                color: #333333;
            }
        }
        .mui-title {
            width: 7.5rem;
            line-height: 1.375rem;
            right: 1.25rem;
            left: 1.25rem;
        }
    }

    .search-input {
        border: 0;
        width: 6.9rem;
        line-height: .75rem;
        height: .75rem;
        margin: 0;
        padding: .3rem;
        font-size: 0.53125rem;
    }

    .search-content {
        width: 100%;
        position: fixed;
        top: 1.375rem;
        bottom: 0;
    }

    .item-header {
        padding: .5rem;
        padding-bottom: 0;
        font-size: 0.3125rem;
        color: #ccc;
    }

    .search-hot > .item-header {
        padding-top: .1rem;
    }

    .item-content {
        padding: .1rem .4rem;
        min-height: .8rem;
        line-height: 1.2rem;

        .mui-badge {
            margin-left: .2rem;
            font-size: .4rem;
            padding: .2rem .4rem;
            background-color: rgba(225, 225, 225, 0.3);
        }
    }
}
</style>
